<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js - v-show</title>
</head>
<body>
    <div id = 'app'>
        <div  v-show="expr"  class="box">Hello, v-show!</div>
        <div v-if="expr" class="box">Hello, v-if!</div>
    </div>

    <div id = 'app1'>
        <p v-if="gender === 1">性别: 男</p>
        <p v-else>性别: 女</p>
        <hr>
        <p v-if="score >= 90"> 成绩评定A </p>
        <p v-else-if="score >= 80"> 成绩评定B </p>
        <p v-else-if="score >= 70"> 成绩评定C </p>
        <p v-else> 成绩评定D</p>
    </div>

    <script src="./Vue2/vue.js"></script>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                expr: false
            }
        })

        const app1 = new Vue({
            el: '#app1',
            data: {
                gender: 0,
                score: 61
            }
        })
    </script>
</body>
</html>
